<template>
  <div class="work-container">
    <el-timeline v-for="(work,index) in workData" :key="index">
      <el-timeline-item :timestamp="work.timestamp" placement="top" class="work-card-content">
        <el-card>
          <div class="synopsis">
            <svg-icon icon-class="company"/> {{work.company}}
            <el-divider direction="vertical"></el-divider>
            <svg-icon icon-class="dept"/> {{work.dept}}
            <el-divider direction="vertical"></el-divider>
            <svg-icon icon-class="work1"/> {{work.post}}
          </div>
          <span class="job-responsibilities-text">工作职责:</span>
          <div class="job-responsibilities">
            <p v-for="(job,i) in work.jobResponsibilities" :key="i">
              {{i+1}}.{{job}}
            </p>
          </div>
          <div class="skill">
            <div v-for="(skill,s) in work.skill" :key="s">
              <el-tag type="info" size="mini"><svg-icon :icon-class="skill.svg"/>{{skill.name}}</el-tag>
              <el-divider direction="vertical" v-if="s+1<work.skill.length"></el-divider>
            </div>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import {defineComponent} from 'vue';
import SvgIcon from "@/components/SvgIcon/SvgIcon";
import Data from '@/data/data.json'
export default defineComponent({
  name: "Work",
  components: {SvgIcon},
  setup(){
    const workData = Data.work
    return {
      workData
    }
  }
})
</script>

<style scoped lang="scss">
  .work-container{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    .work-card-content{
      margin:80px;
      ::v-deep .el-card__body{
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }
      .synopsis{
        font-weight: bolder;
      }
      .job-responsibilities-text{
        margin-top: 20px;
        font-weight: bolder;
      }
      .job-responsibilities{
        padding-left: 50px;
      }
      .skill{
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
      }

    }
  }
</style>